<template>
	<view class="index">
		<view class="index_seach">
			<view class="index_input"  >
				<img class="seach_img" src="https://www.leedong.top/img/seach.png" alt="" srcset="" />
				<input @focus="seachFn" type="text" placeholder="请输入诗词名/作者/诗句" placeholder-class="pla"/>
			</view>
		</view>
		<view class="nav_bar">
			<view class="nav_item">
				<view class="nav_list" @click="ts">
					<img src="https://www.leedong.top/img/ts.png" alt="" />
					<view class="" >
						唐诗
					</view>
				</view>
				<view class="nav_list" @click="sc">
					<img src="https://www.leedong.top/img/sc.png" alt="" />
					<view class="" >
						宋词
					</view>
				</view>
				<view class="nav_list" @click="yq">
					<img src="https://www.leedong.top/img/yuan.png" alt="" />
					<view class="">
						元曲
					</view>
				</view>
				<view class="nav_list" @click="dianji" v-if="dj==0">
					<img src="https://www.leedong.top/img/dianji.png" alt="" />
					<view class="" >
						典籍
					</view>
				</view>
				<view class="nav_list" @click="jumpxcx">
					<img src="../../static/yunshi.png" alt="" />
					<view class="" >
						八字查询
					</view>
				</view>
			</view>
		</view>
		<view class="hot_author">
			<div class="chaodai">
				<div class="left">
					<span class="shu"></span>
					<span class="rmsr">热门诗人</span>
				</div>
				
				<div class="cd_item">
					<span :class="[index==tab_select?'select':'']" @click="tab(index)" v-for="(item,index) in dynasty" :key="index">{{item.name}}</span>
					
				</div>
				<div class="all" @click="poetrypeople">全部诗人>></div>
			</div>
			<view class="nav_bar1">
				
				<swiper class="swiper" circular :current="current" @change="changeSwiper" style="height: 100px;">
			
						<swiper-item >
							<view class="nav_list1" v-for="(item,index) in authors_t" @click="authorsName(item.name)">
								<img :src="item.img" alt="" mode="aspectFit"/>
								<view class="">
									{{item.name}}
								</view>
							</view>
						
						</swiper-item>
						<swiper-item >
							<view class="nav_list1" v-for="(item,index) in authors_s" @click="authorsName(item.name)">
								<img :src="item.img" alt="" mode="aspectFit"/>
								<view class="">
									{{item.name}}
								</view>
							</view>
							
						</swiper-item>
						<swiper-item >
							<view class="nav_list1" v-for="(item,index) in authors_y" @click="authorsName(item.name)">
								<img :src="item.img" alt="" mode="aspectFit"/>
								<view class="">
									{{item.name}}
								</view>
							</view>
							
						</swiper-item>
						<swiper-item >
							<view class="nav_list1" v-for="(item,index) in authors_m" @click="authorsName(item.name)">
								<img :src="item.img" alt="" mode="aspectFit"/>
								<view class="">
									{{item.name}}
								</view>
							</view>
							
						</swiper-item>
						
				
					
				</swiper>
			</view>
			
		</view>
		<view class="" @click="shiciyoxi">
			<img src="https://www.leedong.top/img/111.png" style="height: 150px;width: 100%;" alt="" />
		</view>
		<view class="hot_poetry hot_author">
			<div class="chaodai">
				<div class="left">
					<span class="shu"></span>
					<span class="rmsr">热门诗词</span>
				</div>
				
				
				<div class="all" @click="allPoetry">全部诗词>></div>
			</div>
			<div class="poetry" v-for="(item,index) in list" :key="index" @click="poetrydetail(item.chapter)">
				<div class="title">{{item.chapter}}</div>
				<p class="author">{{item.author}}</p>
				<div class="content" v-html="item.paragraphs">
					
				</div>
			</div>
		
		</view>
			<div class="more"><p>{{moreText}}</p></div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				dynasty:[{name:'唐代',id:"9"},{name:'宋代',id:"11"},{name:'元代',id:"13"},{name:'明代',id:"14"}],
				authors_t:[{name:'李白',id:2,img:'https://www.leedong.top/img/libai.jpg'},{name:'杜甫',id:7,img:'https://www.leedong.top/img/dufu.jpg'},{name:'白居易',id:8,img:'https://www.leedong.top/img/baijuyi1.jpg'},{name:'李商隐',id:2,img:'https://www.leedong.top/img/lishangyin1.jpg'},{name:'王维',id:2,img:'https://www.leedong.top/img/wangwei1.jpg'},],
				authors_s:[{name:'苏轼',id:1,img:'https://www.leedong.top/img/sushi.jpg'},{name:'王安石',id:28,img:'https://www.leedong.top/img/wanganshi.png'},{name:'李清照',id:8,img:'https://www.leedong.top/img/liqingzhao.jpg'},{name:'辛弃疾',id:5,img:'https://www.leedong.top/img/xinqiji.jpg'},{name:'陆游',id:12,img:'https://www.leedong.top/img/luyou.jpg'},],
				authors_y:[{name:'关汉卿',id:62,img:'https://www.leedong.top/img/guanhanqing1.jpg'},{name:'马致远',id:52,img:'https://www.leedong.top/img/mazhiyuan1.jpg'},{name:'王冕',id:130,img:'https://www.leedong.top/img/wangmian.jpg'},{name:'白朴',id:71,img:'https://www.leedong.top/img/baipu1.jpg'},{name:'张养浩',id:89,img:'https://www.leedong.top/img/zhangyanghao1.png'},],
				authors_m:[{name:'于谦',id:92,img:'https://www.leedong.top/img/yuqian.jpg'},{name:'杨慎',id:77,img:'https://www.leedong.top/img/yangshen.png'},{name:'张岱',id:44,img:'https://www.leedong.top/img/zhangdai.jpg'},{name:'唐寅',id:23,img:'https://www.leedong.top/img/tbh.jpg'},{name:'王守仁',id:86,img:'https://www.leedong.top/img/wym.jpg'},],
				tab_select:0,
				pageSize:20,
				pageNum:0,
				total:0,
				list:[],
				moreText:'加载中',
				current:0,
				dj:1
			}
		},
		onLoad() {
          this.poetrylist()
		  this.dianjishow()
		},
		onReachBottom(){
			this.poetrylist()
		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:"一起来学古诗词吧",
						imageUrl:'https://www.leedong.top/img/11556.png'
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title: '一起来学古诗词吧',
					imageUrl:'https://www.leedong.top/img/11556.png'
				
			}
		},
		methods: {
			jumpxcx(){
					uni.navigateToMiniProgram({
					    appId: 'wx6ef0bc93416d89bf',
					    path: '/pages/index/index',
					    //develop开发版；trial体验版；release正式版
					    envVersion: 'release', 
					    success(res) {
					      // 打开成功
					      console.log("跳转小程序成功！",res);
					    } 
					})

			},
			dianjishow(){
				this.$api.dianjishow({}).then(res=>{
					console.log(res)
					this.dj=res.rows[0].isshow
				})
			},
			replaceKg(arr, content) {
			    arr.forEach((re) => {
			        re[content] = re[content].replace(/。/g, ``);
			    });
			    return arr;
			},
			tab(v){
				this.tab_select=v;
				this.current=v;
			},
			authorsName(name){
				let obj={
					name:name,
					desc:'',
					id:''
				}
				uni.navigateTo({
					url:'../../pages/authorsdetail/index?obj='+JSON.stringify(obj)
				})
			},
			shiciyoxi(){
				uni.navigateTo({
					url:"/pages/games/jiandan/jiandan"
				})
			},
			changeSwiper(e){
				console.log(e.detail.current)
				this.tab_select=e.detail.current;
			},
			seachFn(){	
				uni.switchTab({
					url:'../../pages/seach/index'
				})
			},
			ts(){
				uni.navigateTo({
					url:'../../pages/tangshi/index'
				})
			},
			sc(){
				uni.navigateTo({
					url:'../../pages/songci/index'
				})
			},
			yq(){
				uni.navigateTo({
					url:'../../pages/yuanqu/index'
				})
			},
			dianji(){
				uni.navigateTo({
					url:'../../pages/dianji/index'
				})
			},
		
			allPoetry(){
				uni.navigateTo({
					url:'../../pages/poetryseach/index'
				})
			},
			poetrypeople(){
				uni.navigateTo({
					url:'../../pages/poetry/index'
				})
			},
			poetrydetail(t){
				let title={
					title:t,
					id:''
				}
				uni.navigateTo({
					url:'/pages/poetrydetail/index?title='+JSON.stringify(title)
				})
			},
			poetrylist(){
				this.pageNum+=1;
				this.$api.poetryIndex({pageNumber:this.pageNum,pageSize:10}).then((res)=>{
					let totalPage=Math.ceil(res.total/10);
					if(this.pageNum>totalPage){
						this.moreText='已加载全部'
						return;
					}
					this.list=this.list.concat(res.rows)
					console.log(this.list,"9090")
					this.total=res.total
				})
			},
			
		}
	}
</script>

<style lang="scss">
	
	::placeholder input{
		font-size: 55px;
	}
	.index{
		.index_seach{
			height: 50px;
			width: 100%;
			background-color: #7d8468;
			.index_input{
				width: 97%;
				height: 50px;
				margin: auto;
				display: flex;
				align-items: center;
				position: relative;
				input{
					height: 28px;
					border-radius: 20px;
					width:100%;
					background-color: #fff;
					padding-left: 25px;
					font-size: 14px;
				}
				.seach_img{
					width: 32px;
					position: absolute;
					height: 32px;
				}
				.pla{
					padding-left: 30px;
					font-size: 14px;
				}
				
			}
		}
		.nav_bar{
			width: 100%;
			margin-top: 10px;
			background-color: #fff;
			.nav_item{
				height: 75px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.nav_list{
					width: 25%;
					text-align: center;
					font-size: 14px;
					font-family: '宋体';
					img{
						width: 32px;
						height: 32px;
					}
				
				}

			}
		}
		.hot_author{
			width: 100%;
			background-color: #fff;
			margin-top: 5px;
		
			.chaodai{
				display: flex;
				align-items: center;
				padding: 5px;
				font-size: 14px;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					.shu{
						height: 25px;
						width: 5px;
					
						background-color: #7d8468;
					}
					.rmsr{
						 padding-left: 10px;
						 vertical-align: top;
					}
				}
				
				.cd_item{
					// margin-left: 30px;
					
					span{
						width: 50px;
						display: inline-block;
						
					}
					.select{
						color: #7d8468;
					}
				}
				.all{
					color: #2315f5;
				}
			}
		}
		.nav_bar1{
	
				
				.nav_list1{
					width: 20%;
					text-align: center;
					display: inline-block;
					img{
						width: 60px;
						height: 60px;
						border-radius: 50%;
					}
				
			
			}
		}
		.hot_poetry{
			background-color:#f0efe3;
			.poetry{
				text-align: center;
				 background: #f0efe3;
				width: 100%;
				border-bottom: 1px solid #d2d0bb;
				margin-bottom: 10px;
				
				.title{
					
				}
				.author{
					font-size: 13px;
					color: #9a8383;
					padding: 10px;
				}
				.content{
					font-size: 14px;
					padding-bottom: 20px;
					
				}
			}
		}
		.more{
			
			p{
				text-align: center;
				font-size: 13px;
				color: cadetblue;
			}
		}
	}
</style>
